<!DOCTYPE html>
<html lang="en">
<!-- html学习地址 https://www.w3school.com.cn/html/index.asp -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- bgcolor="red" -->
    <!-- 注释快捷键 ctrl +/ -->
    <!-- 标签部分 -->
    <h1>标题:标签部分</h1>
    <h2>我的h2标题</h2>
    <h3>我的h3标题</h3>
    <p>段落文本</p>
    <a href="http://www.badidu.com">超链接,点击跳转到baidu</a>
    <img src="https://m.360buyimg.com/babel/jfs/t1/112212/39/9849/160665/5ee1d9d5Ef067ec22/1daacc262263e821.jpg"
        width="20%" height="20%" />
    <p>我我我我<br />换了一行<br />又换了一行(类似回车)</p>
    <s>这行我不想要了(删除线)</s>
    <h3>下面是个列表/导航?</h3>
    <ul>
        <li>列表第一行</li>
        <li>
            <h3>我的h3标题</h3>
        </li>
        <li><a href="http://www.baidu.com">跳转到baidu</a></li>
        <li><a href="http://www.jd.com" target="_blank">跳转到jd,新页面</a></li>
    </ul>
    <table class="my-table">
        <tr>
            <td>第一行第一列xxx</td>
            <td>第一行第二列哦哦</td>
        </tr>
        <tr>
            <td>第2行第1列</td>
            <td>第2行第2列aaa</td>
        </tr>
    </table>
    <div class="my-table">
        这是一个块级元素
    </div>
    <!-- 属性部分 -->
    <hr />
    <h1>属性部分</h1>
    <h3 align="center">align属性对齐方式</h3>
    <img src="不存在.jpg" alt="这个图片不见喽" />
    <!-- 块级标签部分 -->
    <hr />
    <h1>概念:块级标签/内联标签</h1>
    <div>111111</div>
    <span>222222</span>
    <!-- 表单标签部分 -->
    <hr />
    <h1>表单标签部分</h1>
    <input type="text" />
    <input type="password" />
    <input type="radio" /><!-- 性别男女,讲一下name属性的用途 -->
    <input type="checkbox" /><!-- 爱好 -->
    <input type="color" />
    <input type="submit" value="提交按钮" />
    <input type="button" value="按钮" />
    <button>按钮</button><!-- 等价上面 -->
    <select>
        <option value="1">开发中</option>
        <option value="2">测试中</option>
        <option value="3">已上线</option>
        <option value="4">已下线</option>
    </select>
    <hr />
    <h1>CSS部分</h1>
    <!-- CSS  -->
    <h3>css选择器</h3>
    <p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
    <h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2>
    <h3>id选择器</h3>
    <div id="my-div">
        <p id="my-p-1">
            这是一个段落文字
        </p>
    </div>
    <hr />
    <h1>CSS3</h1>
    <div id="divcss3">CSS3 <br />动画</div>
    <div id="div-gradient-1">CSS3 渐变色</div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>

<style>
    button {
        padding: 10px;
    }

    h1 {
        color: #ff0000;
    }

    /* 继承 */
    body {
        font-family: Verdana;
        /* background-image: url("http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1307/10/c6/23169115_1373445283523.jpg"); */
    }

    /* 上下文选择器 */
    li a {
        /* 例表里的超链接斜体 */
        font-style: italic;
        text-decoration: none;
    }

    /* 上下文选择器 优先级大于普通选择器 & 卵用没有的strong*/
    h2 strong {
        color: blue;
    }

    strong {
        color: red;
    }

    /* class选择器 */
    .my-table {
        border: 2px solid;
        border-radius: 25px;
        background-color: rgb(136, 20, 20);
        margin-left: 100px;
        /* margin: 1000px 100px 1000px 100px; */
    }

    /* table.my-table {同上} */

    /* 官方规则: id选择器 > class选择器 > 类型选择器(tag)*/
    /* id选择器 */
    #my-p-1 {
        font-style: italic;
        text-align: center;
        margin-top: 0.5em;
    }

    /* 属性选择器(不讲) */
    input[type="button"] {
        background-color: burlywood;
    }

    /* css3 */

    #divcss3 {
        width: 200px;
        height: 200px;
        background: rgb(254, 67, 101);
        position: relative;
        animation: divcss3 5s;
        -webkit-animation: divcss3 5s;
        border-radius: 40px;
        font-weight: bold;
        font-size: 20px;
        padding: 10px;
        /* Safari and Chrome */
    }

    @keyframes divcss3 {
        0% {
            background: rgb(254, 67, 101);
            left: 0px;
            top: 0px;
        }

        25% {
            background: rgb(252, 157, 154);
            left: 800px;
            top: 0px;
        }

        50% {
            background: rgb(249, 205, 173);
            left: 0px;
            top: 0px;
        }

        75% {
            background: rgb(200, 200, 169);
            left: 800px;
            top: 0px;
        }

        100% {
            background: rgb(254, 67, 101);
            left: 0px;
            top: 0px;
        }
    }

    /* 渐变色 */
    #div-gradient-1 {
        height: 200px;
        background-color: red;
        /* 浏览器不支持时显示 */
        background-image: linear-gradient(#e66465, #9198e5);
    }


    /* css学习地址 https://www.w3school.com.cn/css/css_syntax_id_selector.asp */
</style>

</html>